<template>
  <span 
    class="status-tag" 
    :class="[
      `status-tag--${type}`,
      { 'status-tag--outline': outline }
    ]"
  >
    <i v-if="icon" :class="icon" class="status-tag__icon"></i>
    <slot>{{ text }}</slot>
  </span>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from 'vue';

export interface StatusTagProps {
  /**
   * 标签类型，决定标签颜色
   * - primary: 主要 (蓝色)
   * - success: 成功 (绿色)
   * - warning: 警告 (黄色)
   * - danger: 危险 (红色)
   * - info: 信息 (灰色)
   */
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
  
  /**
   * 标签文本内容
   */
  text?: string;
  
  /**
   * 图标类名 (基于 Font Awesome)
   * 示例: 'fas fa-check'
   */
  icon?: string;
  
  /**
   * 是否使用轮廓样式
   */
  outline?: boolean;
}

const props = withDefaults(defineProps<StatusTagProps>(), {
  type: 'primary',
  text: '',
  icon: '',
  outline: false
});
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-pill;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  line-height: 1;
  
  &__icon {
    margin-right: $spacing-xs;
    font-size: 0.85em;
  }
  
  // 实色标签
  &--primary {
    background-color: rgba($primary, 0.15);
    color: $primary;
  }
  
  &--success {
    background-color: rgba($success, 0.15);
    color: $success;
  }
  
  &--warning {
    background-color: rgba($warning, 0.15);
    color: $warning;
  }
  
  &--danger {
    background-color: rgba($danger, 0.15);
    color: $danger;
  }
  
  &--info {
    background-color: rgba($gray-600, 0.15);
    color: $gray-700;
  }
  
  // 轮廓标签
  &--outline {
    background-color: transparent;
    
    &.status-tag--primary {
      border: 1px solid $primary;
    }
    
    &.status-tag--success {
      border: 1px solid $success;
    }
    
    &.status-tag--warning {
      border: 1px solid $warning;
    }
    
    &.status-tag--danger {
      border: 1px solid $danger;
    }
    
    &.status-tag--info {
      border: 1px solid $gray-500;
    }
  }
}
</style> 